<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        #app1{
            width: 100%;
            position: relative;
        }
        .order-list-left,.order-list-right{
            border: 1px solid red;
        }
        .order-list-left{
            width: 10%;
        }
        .order-list-right{
            width: 88%;
           float: right;
        }
        .el-divider{
            margin-top: 0px;
        }
        .el-row{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div id="app1">

    <el-row>
        <el-col :span="3" :offset="1">
            <div class="grid-content bg-purple">
                <el-button type="primary" icon="el-icon-plus" @click="clickAddOrder">添加订单</el-button>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="grid-content bg-purple-light">
                <el-form :inline="true" :model="formQuery" class="demo-form-inline">
                    <el-form-item label="订单编号">
                        <el-input v-model="formQuery.orderId"  placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="交易时间">
                        <el-date-picker
                                type="date"
                                v-model="formQuery.dealTime"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>


            </div>
        </el-col>
    </el-row>



    <el-divider></el-divider>


    <el-row>
        <el-col :span="2">
            <template>
                <el-tabs :tab-position="'left'" style="height:400px" @tab-click="handleClick">
                    <el-tab-pane label="全部订单" name="0">
                    </el-tab-pane>
                    <el-tab-pane v-for="orderStatus in orderStatuses" :label="orderStatus.allStatus" :name="orderStatus.id">
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-col>
        <el-col :span="22">
            <template>
                <el-table
                        :data="orders"
                        v-loading="loading"
                        style="width: 100%;height: 450px"
                        :default-sort = "{prop: 'id', order: 'descending'}"
                >
                    <el-table-column
                            prop="id"
                            label="编号"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="orderId"
                            label="订单编号"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="orderType"
                            label="订单类型">
                    </el-table-column>
                    <el-table-column
                            prop="pname"
                            label="商品名称">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="客户名称">
                    </el-table-column>
                    <el-table-column
                            prop="payType"
                            label="支付方式">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="交易金额">
                    </el-table-column>
                    <el-table-column
                            prop="dealTime"
                            label="交易时间">
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="交易数量">
                    </el-table-column>
                    <el-table-column
                            prop="allStatus"
                            label="订单状态">
                        <template slot-scope="scope">

                            <el-button size="small" type="success" v-if="scope.row.allStatus =='已发货'">已发货</el-button>
                            <el-button size="small" type="warning" v-else-if="scope.row.allStatus =='未审核'">未审核</el-button>
                            <el-button size="small" type="success" v-else-if="scope.row.allStatus =='已审核'">已审核</el-button>
                            <el-button size="small" type="success" v-else-if="scope.row.allStatus =='已支付'">已支付</el-button>
                            <el-button size="small" type="success" v-else-if="scope.row.allStatus =='已结束'">已结束</el-button>
                            <el-button size="small" type="info" v-else-if="scope.row.allStatus =='未下单'">未下单</el-button>
                            <el-button size="small" type="success" v-else-if="scope.row.allStatus =='已下单'">已下单</el-button>
                            <el-button size="small" type="success" v-else-if="scope.row.allStatus =='待发货'">待发货</el-button>
                            <el-button size="small" type="success" v-else-if="scope.row.allStatus =='已发货'">已发货</el-button>
                            <el-button size="small" type="success" v-else-if="scope.row.allStatus =='已完成'">已完成</el-button>
                            <el-button size="small" type="primary" v-else-if="scope.row.allStatus =='待排单'">待排单</el-button>
                            <el-button size="small" type="primary" v-else-if="scope.row.allStatus =='待生产'">待生产</el-button>
                            <el-button size="small" type="primary" v-else-if="scope.row.allStatus =='生产中'">生产中</el-button>
                            <el-button size="small" type="primary" v-else-if="scope.row.allStatus =='已入库'">已入库</el-button>
                            <el-button size="small" type="danger" v-else-if="scope.row.allStatus =='已驳回'">已驳回</el-button>
                            <el-button size="small" type="danger" v-else>无</el-button>

                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="allStatus"
                            label="说明">
                        <template slot-scope="scope">
                            <span v-if="scope.row.allStatus =='未审核'">等待审核</span>
                            <span v-else-if="scope.row.allStatus =='已审核'">待生产</span>
                            <span v-else-if="scope.row.allStatus =='已发货'">支付成功</span>
                            <span v-else-if="scope.row.allStatus =='已支付'">已发货</span>
                            <span v-else-if="scope.row.allStatus =='已支付'">已发货</span>
                            <span v-else>{{scope.row.allStatus}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="allStatus"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="audit(scope.row)" v-if="scope.row.allStatus =='未审核'">审核</el-button>
                            <el-button size="small" type="success" @click="toOrderDetails(scope.row.id)" icon="el-icon-tickets" v-else></el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total,prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>

    <el-dialog title="添加订单" :visible.sync="dialogFormVisible">
        <el-form :model="order" :inline="true">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="客户名称">
                        <el-select v-model="order.customId" placeholder="请选择客户">
                            <el-option
                                    v-for="item in companies"
                                    :key="item.id"
                                    :label="item.companyName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支付方式">
                        <el-select v-model="order.orderType" placeholder="请选择支付方式">
                            <el-option label="线下支付" value="线下支付"></el-option>
                            <el-option label="在线字符" value="在线字符"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="下单者">
                        <el-select v-model="order.orderHolder" placeholder="请选择下单者">
                            <el-option
                                    v-for="item in companies"
                                    :key="item.id"
                                    :label="item.companyName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="产品名称：">
                        <el-select v-model="order.productId" placeholder="请选择产品名称">
                            <el-option
                                    v-for="item in products"
                                    :key="item.id"
                                    :label="item.pname"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="交易金额">
                        <el-input v-model="order.money" placeholder="请选择交易金额"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交易数量">
                        <el-input v-model="order.number" placeholder="请选择交易数量"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubOrder">确 定</el-button>
        </div>
    </el-dialog>


    <!--审核模态框-->
    <el-dialog
            title="审核"
            :visible.sync="centerDialogVisible"
            width="60%"
            v-if="orderDetails"
            center>

        <el-row>
            <el-col :span="3"><span>客户名称：</span></el-col>
            <el-col :span="3"><span>&nbsp;{{orderDetails.companyName}}</span></el-col>
            <el-col :span="3"><span>产品名称：</span></el-col>
            <el-col :span="3"><span>&nbsp;{{orderDetails.pname}}</span></el-col>
            <el-col :span="3"><span>产品编号：</span></el-col>
            <el-col :span="3"><span>&nbsp;{{orderDetails.productId}}</span></el-col>
            <el-col :span="3"><span>需求数量：</span></el-col>
            <el-col :span="3"><span>&nbsp;{{orderDetails.number}}</span></el-col>
        </el-row>
        <el-row>
            <el-col :span="3"><span>商品类型：</span></el-col>
            <el-col :span="3"><span>&nbsp;</span></el-col>
            <el-col :span="3"><span>申请时间：</span></el-col>
            <el-col :span="6"><span>&nbsp;{{orderDetails.dealTime}}</span></el-col>
            <el-col :span="3"><span>审核时间：</span></el-col>
            <el-col :span="6"><span>&nbsp;</span></el-col>
        </el-row>
        <el-row>
            <el-col :span="3">审核人：</el-col>
            <el-col :span="5">
                <el-input placeholder="请输入内容" v-model="orderDetails.operator"  ></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3">说明：</el-col>
            <el-col :span="21">
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="orderDetails.remark"
                        maxlength="200"
                        rows="10"
                        show-word-limit>
                </el-input>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <div> <el-button type="success" @click="clickPassOrReject('11')">通过</el-button> <el-button type="warning" @click="clickPassOrReject('12')" >拒绝</el-button> <el-button type="primary" @click="centerDialogVisible=false">取消</el-button></div>

        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
</div>

<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/axios/axios.min.js"></script>

<script>
    let app1 = new Vue({
        el:'#app1',
        data(){
            return{
                orderStatuses:[],//左侧订单状态数组
                orders:[],//订单数组
                total:null,//页码
                currentPage:null,//当前页数
                tabName:0,//左侧订单状态数
                dialogFormVisible:false,//模态框的状态
                centerDialogVisible:false,//审核模态框
                companies:[],//客户公司\
                products:[],//公司所有商品id
                pageSize:null,
                orderDetails:null,//模态框中的内容
                formQuery:{
                    orderId:null,
                    dealTime:null
                },
                order:{
                    customId:null,//客户id
                    orderType:null,//订单类型
                    orderHolder:null,//下单者
                    productId:null,//商品id
                    number:null,//商品数量
                    money:null,//交易金额
                }
            }
        },
        methods:{
            //左侧菜单栏点击
            handleClick(tab, event) {
                this.tabName = tab.name
                this.findOrderByOrderStatus(tab.name,1)
            },
            //获取所有的订单状态
            findAllOS(){
                let _this = this;
                axios.get('/orderStatus').then(res=>{
                    _this.orderStatuses = res.data.data;
                })
            },
            //根据订单状态进行模糊查询
            findOrderByOrderStatus(OrderStatus,current){
                let _this = this;
                let dealTime = this.toDealTime(this.formQuery.dealTime)
                axios.get('orders/'+OrderStatus+'?current='+current,{
                    params: {orderId:this.formQuery.orderId,dealTime:dealTime}
                }).then(res=>{
                    _this.orders = res.data.data.records
                    _this.pageSize = res.data.data.size
                    _this.total = res.data.data.total
                    _this.currentPage = res.data.data.current
                })
            },
            //当页数改变时
            handleCurrentChange(currentPage){
                let _this = this
                this.currentPage = currentPage
                this.findOrderByOrderStatus(_this.tabName,currentPage)
            },
            //提交模糊查询表单
            onSubmit(){
                console.log(this.formQuery.dealTime);
                this.findOrderByOrderStatus(this.tabName,1);
            },
            //转换时间
            toDealTime(dealTime){
                if (dealTime!=null){
                    let y = dealTime.getFullYear();
                    let m = dealTime.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    let d = dealTime.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    let h = dealTime.getHours();
                    h=h < 10 ? ('0' + h) : h;
                    let minute = dealTime.getMinutes();
                    minute = minute < 10 ? ('0' + minute) : minute;
                    let second=dealTime.getSeconds();
                    second=second < 10 ? ('0' + second) : second;
                    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
                }

            },
            //弹出模态框
            audit(row){
                this.orderDetails =JSON.parse(JSON.stringify(row))
                console.log(this.orderDetails);
                this.centerDialogVisible = true
            },
            //去订单详情页面
            toOrderDetails(id){
                localStorage.setItem("id",id)
                location.href='/order-details.html'
            },
            //点击通过拒绝方法
            clickPassOrReject(state){
                let _this = this
                let params={
                    id:_this.orderDetails.id,
                    operator:_this.orderDetails.operator,
                    orderStatus:state,
                    remark:_this.orderDetails.remark,
                }
                axios.put('order',params).then(res=>{
                    if (res.data.state==1){
                        _this.centerDialogVisible = false
                        _this.orderDetails = null
                        this.findOrderByOrderStatus(_this.tabName, this.currentPage)
                        this.$message({
                            message: '恭喜你，审核成功',
                            type: 'success'
                        });
                    }
                })
            },
            //点击订单添加方法
            clickAddOrder(){
                //给客户下拉框赋值
                axios.get('/companies').then(res=>{
                    this.companies = res.data.data
                })
                //给商品下拉框赋值
                axios.get('/findByCIDProduct').then(res=>{
                    this.products = res.data.data
                    console.log(this.products);
                })
                this.dialogFormVisible =true
            },
            //提交订单添加
            onSubOrder(){
                console.log(this.order);
                axios.post('/order',this.order).then(res=>{
                    if (res.data.state==1){
                        this.dialogFormVisible = false
                        this.findOrderByOrderStatus();
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }
                })
            }
        },
        mounted(){
            this.findAllOS()
            this.findOrderByOrderStatus(0,1)
        }
    })
</script>
</body>
</html>